<template>
	<view>
		<uni-popup ref="popup" type="center" borderRadius="38rpx 38rpx 38rpx 38rpx	">
			<view class="box">
				<view class="title flex-center">
					验证手机号
				</view>
				<view class="form-input">
					<view class="label">
						手机号
					</view>
					<view class="phone">
						<u--input placeholder="请输入绑定的手机号" border="none" v-model="form.user_login">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="text" size="mini"></u-button>
							</template>
						</u--input>
					</view>
					<view class="flex-between">
						<view class="">
							<view class="label" style="margin-top: 40rpx;">
								验证码
							</view>
							<view class="phone">
								<u--input placeholder="请输入验证码" v-model="form.code" border="none"></u--input>
							</view>
						</view>
						<view class="">
							<view class="label" style="margin-top: 40rpx;">
								密码
							</view>
							<view class="phone">
								<u--input placeholder="请输入密码" v-model="form.password" :password="true"
									border="none"></u--input>
							</view>
						</view>

					</view>
				</view>
				<button class="submit flex-center" @click="submitForm">提 交</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		loginForgetApi,
		getCodeApi
	} from '@/api/index.js'
	export default {
		name: "forgetPassword",
		data() {
			return {
				tips: '',
				form: {
					user_login: "",
					password: "",
					code: ""
				}
			};
		},
		methods: {
			open() {
				this.$refs.popup.open('center')
			},
			close(){
				this.$refs.popup.close()
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (uni.$u.test.isEmpty(this.form.user_login)) {
						uni.$u.toast('请输入手机号');
						return false
					}
					if (!uni.$u.test.mobile(this.form.user_login)) {
						uni.$u.toast('请输入正确的手机号');
						return false
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					try {
						const {
							data: res
						} = await getCodeApi({
							mobile: this.form.user_login,
							type: 1, //0验证码登录，1忘记密码，2注册验证码
						});
						console.log(res);
						if (res.code === 1) {
							this.form.code = Number(res.data);
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(res.msg);
						}
					} catch (e) {} finally {
						uni.hideLoading();
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			// 提交
			async submitForm() {
				if (uni.$u.test.isEmpty(this.form.user_login)) {
					uni.$u.toast('请输入手机号');
					return false
				}
				if (!uni.$u.test.mobile(this.form.user_login)) {
					uni.$u.toast('请输入正确的手机号');
					return false
				}
				if (!uni.$u.test.code(this.form.code, 6)) {
					uni.$u.toast('请输入验证码');
					return false
				}
				if (!this.form.password) {
					uni.$u.toast('请输入密码');
					return false
				}
				const {data:res} = await loginForgetApi(this.form);
				uni.$u.toast(res.msg);
				if(res.code === 1){
					setTimeout(()=>{
						this.close();
					},400)
				}else{
					
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.box {
		width: px_2_vw(924);
		height: px_2_vw(615);
		background-size: 100% 100%;
		background-image: url('@/static/images/login/beijing-password.png');

		.title {
			text-align: center;
			width: px_2_vw(375);
			height: px_2_vw(88);
			font-weight: bold;
			font-size: px_2_vw(40);
			background-size: 100% 100%;
			background-image: url('@/static/images/login/title-shouji.png');
			margin: 0 auto;
			color: #fff;
		}

		.form-input {
			color: #939292;
			padding: 58rpx 72rpx 58rpx 72rpx;
		}

		.label {
			margin-bottom: 24rpx;
		}

		.phone {
			padding-bottom: 15rpx;
			border-bottom: 1rpx dashed #939292;
		}

		.submit {
			width: px_2_vw(334);
			height: px_2_vw(77);
			border-radius: 38rpx;
			background: #A4BBF5;
			color: #fff;
		}
	}
</style>